
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.CheckboxMixin = void 0;

const _icon = _interopRequireDefault(require('../icon'));

const _field = require('./field');

const _relation = require('./relation');

const _utils = require('../utils');

/**
 * Common part of Checkbox & Radio
 */
const CheckboxMixin = function CheckboxMixin(_ref) {
  const { parent } = _ref;
  const { bem } = _ref;
  const { role } = _ref;
  return {
    mixins: [(0, _relation.ChildrenMixin)(parent), _field.FieldMixin],
    props: {
      name: null,
      value: null,
      disabled: Boolean,
      iconSize: [Number, String],
      checkedColor: String,
      labelPosition: String,
      labelDisabled: Boolean,
      shape: {
        type: String,
        default: 'round',
      },
      bindGroup: {
        type: Boolean,
        default: true,
      },
    },
    computed: {
      disableBindRelation: function disableBindRelation() {
        return !this.bindGroup;
      },
      isDisabled: function isDisabled() {
        return this.parent && this.parent.disabled || this.disabled;
      },
      direction: function direction() {
        return this.parent && this.parent.direction || null;
      },
      iconStyle: function iconStyle() {
        const checkedColor = this.checkedColor || this.parent && this.parent.checkedColor;

        if (checkedColor && this.checked && !this.isDisabled) {
          return {
            borderColor: checkedColor,
            backgroundColor: checkedColor,
          };
        }
      },
      tabindex: function tabindex() {
        if (this.isDisabled || role === 'radio' && !this.checked) {
          return -1;
        }

        return 0;
      },
    },
    methods: {
      onClick: function onClick(event) {
        const _this = this;

        const { target } = event;
        const { icon } = this.$refs;
        const iconClicked = icon === target || icon.contains(target);

        if (!this.isDisabled && (iconClicked || !this.labelDisabled)) {
          this.toggle(); // wait for toggle method to complete
          // so we can get the changed value in the click event listener

          setTimeout(() => {
            _this.$emit('click', event);
          });
        } else {
          this.$emit('click', event);
        }
      },
      genIcon: function genIcon() {
        const h = this.$createElement;
        const { checked } = this;
        const iconSize = this.iconSize || this.parent && this.parent.iconSize;
        return h('div', {
          ref: 'icon',
          class: bem('icon', [this.shape, {
            disabled: this.isDisabled,
            checked,
          }]),
          style: {
            fontSize: (0, _utils.addUnit)(iconSize),
          },
        }, [this.slots('icon', {
          checked,
        }) || h(_icon.default, {
          attrs: {
            name: 'success',
          },
          style: this.iconStyle,
        })]);
      },
      genLabel: function genLabel() {
        const h = this.$createElement;
        const slot = this.slots();

        if (slot) {
          return h('span', {
            class: bem('label', [this.labelPosition, {
              disabled: this.isDisabled,
            }]),
          }, [slot]);
        }
      },
    },
    render: function render() {
      const h = arguments[0];
      const Children = [this.genIcon()];

      if (this.labelPosition === 'left') {
        Children.unshift(this.genLabel());
      } else {
        Children.push(this.genLabel());
      }

      return h('div', {
        attrs: {
          role,
          tabindex: this.tabindex,
          'aria-checked': String(this.checked),
        },
        class: bem([{
          disabled: this.isDisabled,
          'label-disabled': this.labelDisabled,
        }, this.direction]),
        on: {
          click: this.onClick,
        },
      }, [Children]);
    },
  };
};

exports.CheckboxMixin = CheckboxMixin;
